<!-- 显示右侧的字段属性 -->
<template>
    <div v-if="show">

        <div>


            <!--            <WidgetForm ref="widgetForm"></WidgetForm>-->
        </div>
        <el-dialog title="字段级联设置" :visible.sync="dialogFormVisible" width="85%">
            <el-button type="danger" icon="el-icon-plus" @click="addListRow()">新增</el-button>
            <el-table :data="getDialogFormData(data)" border stripe style="width: 100%;"
                      :span-method="objectSpanMethod">
                <el-table-column prop="name" label="所选值">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.value" placeholder="请选择">

                            <el-option  v-for="item in remoteFuncsFields" :key="item.value" :value="item.value"
                            >
                            </el-option>
                        </el-select>

                    </template>
                </el-table-column>
                <el-table-column label="变换字段" :colspan="2">
                    <template slot-scope="scope1">
                        <el-button type="text" @click="addInnerRow(scope1.$index)">新增</el-button>
                        <el-table v-if="scope1.$index>=0" :data="data.options.effect[scope1.$index].effects"
                                  :border="hiddenTableHeader" stripe style="width: 100%;"
                                  :show-header="hiddenTableHeader">
                            <el-table-column label="所选值">

                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.target" placeholder="请选择">
                                        <el-option v-for="item in controlsItem" :key="item.model" :value="item.model"
                                                   :label="item.name">
                                        </el-option>
                                    </el-select>
                                    &nbsp;
                                    <el-select v-model="scope.row.type" placeholder="请选择">
                                        <el-option label="隐藏" value="n">隐藏</el-option>
                                        <el-option label="显示" value="w">显示</el-option>
                                        <el-option label="必填" value="b">必填</el-option>
                                    </el-select>
                                    &nbsp;
                                    <el-button type="text" @click="delInnerRow(scope1.$index,scope.$index)">删除
                                    </el-button>

                                </template>
                            </el-table-column>

                        </el-table>


                    </template>
                </el-table-column>
                <el-table-column prop="sex" label="变换类型">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
                            <i class="el-icon-check" aria-hidden="true"></i>
                        </el-button>
                        <div v-else>
                            <!--                            <el-button type="text" size="medium" @click="editData(scope.row)">-->
                            <!--                                <i class="el-icon-edit" aria-hidden="true"></i>-->
                            <!--                            </el-button>-->
                            <el-button type="text" size="medium" @click="handleDeleteEffect(scope.row,scope.$index)">
                                <i class="el-icon-delete" aria-hidden="true"></i>
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <!--                <el-table-column prop="rule" label="校验规则">

                                </el-table-column>-->
                <el-table-column label="操作">

                </el-table-column>
            </el-table>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisibleClose(data)">确 定</el-button>
            </div>

        </el-dialog>


        <el-form label-position="left">

            <el-form-item label="显示标题">
                <el-checkbox v-model="data.options.showTitle"></el-checkbox>
            </el-form-item>
            <el-form-item label="显示批注">
                <el-checkbox v-model="data.options.showAnnotation"></el-checkbox>
            </el-form-item>


            <el-form-item label="标题" v-if="data.type!='grid'
            && data.type!='subTable'
                     ">
                <el-input class="custom_input" v-model="data.name"></el-input>
            </el-form-item>
            <el-form-item label="表单字段" v-if="data.type!='grid'
            && data.type!='subTable'
                     ">
                <el-select v-model="data.model" placeholder="请选择" @change="changeFormProperties">
                    <el-option
                            v-for="item in formProperties"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

            </el-form-item>


            <el-form-item label="计量单位"
                          v-if="data.type=='input' ">
                <template>
                    <el-select v-model="data.options.unit" placeholder="请选择"
                               @change="onSelectedControlType($event, item)">
                        <el-option-group
                                v-for="group in unitOptions"
                                :key="group.label"
                                :label="group.label">
                            <el-option
                                    v-for="item in group.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="控件类型"
                          v-if="data.type!='grid' && data.type!='text'
                          && data.type!='tabs' && data.type!='h4' && data.type!='inputNumber'
                          && data.type!='badge' && data.type!='tag' && data.type!='link'
                          && data.type!='dateCalendar' && data.type!='progress'
                          && data.type!='table' && data.type!='block'
                          && data.type!='subTable' && data.type!='processInfo'
                          && data.type!='h4' && data.type!='p'
                          && data.type!='small' && data.type!='mark'
                          && data.type!='del' && data.type!='u'
                          && data.type!='em' && data.type!='strong'
                          && data.type!='color' && data.type!='rate'
                             && data.type!='breadcrumb'
                             && data.type!='steps'
                             && data.type!='card'
                             && data.type!='icon'
                             && data.type!='alert'
                             && data.type!='dividers'
                             && data.type!='collapse'
                          && data.type!='iframe' && data.type!='divider'
                           && data.type!='fileUpload'">
                <template>
                    <el-select v-model="data.type" placeholder="请选择" @change="onSelectedControlType($event)">
                        <el-option-group
                                v-for="group in options"
                                :key="group.label"
                                :label="group.label">
                            <el-option
                                    v-for="item in group.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="小圆点" v-if=" data.type=='badge' ">


                <template>
                    <el-switch v-model="data.options.dot"></el-switch>
                </template>
            </el-form-item>
            <el-form-item label="值" v-if=" data.type=='badge' ">


                <template>
                    <el-input class="custom_input" v-model="data.options.defaultValue"></el-input>
                </template>
            </el-form-item>
            <el-form-item label="组件尺寸" v-if=" data.type=='inputNumber' ">


                <template>
                    <el-radio-group v-model="data.options.radioSize">
                        <el-radio-button label="medium">大型</el-radio-button>
                        <el-radio-button label="small">小型</el-radio-button>
                        <el-radio-button label="mini">迷你</el-radio-button>
                    </el-radio-group>
                </template>
            </el-form-item>


            <el-form-item label="链接地址" v-if=" data.type=='iframe' ">
                <template>
                    <el-input class="custom_input" type="textarea" v-model="data.options.src"></el-input>
                </template>
            </el-form-item>
            <el-form-item v-if=" data.type=='dialog' ">
                <template>
                    <div class="ng-scope">
                        <div class="input-group">


                            <el-form-item label="选择对话框">
                                <el-select v-model="data.options.customDialogAlias" placeholder="请选择"
                                           @click.native="getAllDialogDate"

                                           @change="getAllDialogDate">
                                    <el-option
                                            v-for="item in customDialogDataValue"
                                            :key="item.alias"
                                            :label="item.name"
                                            :value="item.alias">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                        </div>
                        <div class="input-group">
                            <el-form-item label="设置返回值">
                                <el-button type="danger" @click="setCustDialogRes">设置返回值</el-button>
                            </el-form-item>


                        </div>
                        <div class="input-group">

                            <el-form-item label="按钮名称">
                                <el-input class="custom_input" v-model="data.options.btnName"></el-input>
                            </el-form-item>

                        </div>
                        <div class="input-group">

                            <el-form-item label="按钮图标" class="custom_input">
                                <icon-picker v-model="data.options.icon"></icon-picker>
                            </el-form-item>


                        </div>
                    </div>
                </template>
            </el-form-item>
            <el-form-item v-if=" data.type=='userDialog' ">

                <el-form-item label="按钮名称">
                    <el-input class="custom_input" v-model="data.options.btnName"></el-input>
                </el-form-item>
                <el-form-item label="按钮图标" class="custom_input">
                    <icon-picker v-model="data.options.icon"></icon-picker>
                </el-form-item>


                <template>
                    <div class="ng-scope">
                        <div class="input-group">
                            <el-form-item label="选择器设置">
                                <el-select v-model="data.options.selectorType" placeholder="请选择"
                                           @click.native="getAllUserDialogSelectorList"
                                           @change="getAllUserDialogData"
                                >

                                    <el-option
                                            v-for="item in userDialogSelectorList"
                                            :key="item.alias"
                                            :label="item.name"
                                            :value="item.alias">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                        </div>
                    </div>

                    <el-form-item label="多选设置">
                        <el-checkbox v-model="data.options.isSingle">多选</el-checkbox>
                    </el-form-item>

                </template>
            </el-form-item>
            <el-dialog title="" :visible.sync="setCustDialogResFormVisible" :append-to-body="true" width="40%">

                <el-table :data="data.options.chooseFiledList">
                    <el-table-column
                            prop="columnKey"
                            label="返回结果字段">
                    </el-table-column>
                    <el-table-column label="绑定显示的属性">
                        <template slot-scope="scope">
                            <el-select v-model="data.options.chooseFiledList[scope.$index].target" placeholder="请选择">
                                <el-option v-for="item in controlsItem" :key="item.model" :value="item.model"
                                           :label="item.name">
                                </el-option>
                            </el-select>
                        </template>


                    </el-table-column>
                    <el-table-column label="解除绑定">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="unBindTarget(scope.$index)">删除</el-button>
                        </template>


                    </el-table-column>


                    <!--                        <el-table-column-->
                    <!--                                v-for="item in resultFieldArray"  :prop="item.columnKey" :label="item.columnKey">-->


                    <!--                        </el-table-column>-->


                </el-table>
                <div slot="footer" class="dialog-footer">

                    <el-button @click="setCustDialogResFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click.native="confirmFormCustomDialog()">确 定</el-button>
                </div>
            </el-dialog>
            <el-form-item label="宽度" v-if="Object.keys(data.options).indexOf('width')>=0">
                <el-input class="custom_input" v-model="data.options.width"></el-input>
            </el-form-item>

            <el-form-item label="高度" v-if="Object.keys(data.options).indexOf('height')>=0">
                <el-input class="custom_input" v-model="data.options.height"></el-input>
            </el-form-item>

            <!--            <el-form-item label="大小" v-if="Object.keys(data.options).indexOf('sizes')>=0">-->


            <!--                宽度：-->
            <!--                <el-input class="custom_input"  type="number" v-model.number="data.options.sizes.width"></el-input>-->
            <!--                高度：-->
            <!--                <el-input  class="custom_input"  type="number" v-model.number="data.options.sizes.height"></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item label="填写说明"
                          v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date'
                          ||data.type != 'dialog')">
                <el-input class="custom_input" v-model="data.options.placeholder"></el-input>
            </el-form-item>


            <!--            <el-form-item label="标签是否标红" v-if="Object.keys(data.options).indexOf('showRed')>=0">-->
            <!--                <el-switch v-model="data.options.showRed">-->
            <!--                </el-switch>-->
            <!--            </el-form-item>-->


            <!--            <el-form-item label="字段提示"-->
            <!--                          v-if="data.type!='processInfo' && data.type!='iframe' && data.type!='divider' && data.type!='text'">-->
            <!--                <el-input v-model="data.options.tip"></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="区域布局" v-if="data.type=='block'">
                <el-radio-group v-model="blockLayout" @change="layOutableColumnsChange($event,data.key)">
                    <el-radio-button label="12">两列</el-radio-button>
                    <el-radio-button label="8">三列</el-radio-button>
                    <el-radio-button label="6">四列</el-radio-button>
                </el-radio-group>
            </el-form-item>


            <el-form-item label="布局方式" v-if="Object.keys(data.options).indexOf('inline')>=0">
                <el-radio-group v-model="data.options.inline">
                    <el-radio-button :label="false">块级</el-radio-button>
                    <el-radio-button :label="true">行内</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="显示输入框" v-if="Object.keys(data.options).indexOf('showInput')>=0">
                <el-switch v-model="data.options.showInput"></el-switch>
            </el-form-item>
            <el-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min')>=0" class="custom_input">
                <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max')>=0" class="custom_input">
                <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="步长" v-if="Object.keys(data.options).indexOf('step')>=0" class="custom_input">
                <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="是否多选" v-if="data.type=='select' || data.type=='imgupload' || data.type=='fileUpload'">
                <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
            </el-form-item>
            <el-form-item label="是否可搜索" v-if="data.type=='select'">
                <el-switch v-model="data.options.filterable"></el-switch>
            </el-form-item>
            <el-form-item label="允许半选" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
                <el-switch
                        v-model="data.options.allowHalf"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="支持透明度" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
                <el-switch
                        v-model="data.options.showAlpha"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="是否显示标签" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
                <el-switch v-model="data.options.showLabel">
                </el-switch>
            </el-form-item>

            <el-form-item label="是否显示边框" v-if="data.type == 'radio' ">
                <el-switch v-model="data.options.border"></el-switch>
            </el-form-item>
            <el-form-item label="是否禁用" v-if="data.type == 'radio' ">
                <el-switch v-model="data.options.disabled">></el-switch>
            </el-form-item>

            <template v-if="data.type=='tag' ">
                <el-form-item label="尺寸">
                    <el-radio-group v-model="data.options.radioSize">
                        <el-radio-button label="medium">大</el-radio-button>
                        <el-radio-button label="small">中</el-radio-button>
                        <el-radio-button label="mini">小</el-radio-button>
                    </el-radio-group>
                </el-form-item>

            </template>
            <template v-if="data.type=='progress' ">
                <el-form-item label="显示类型">
                    <el-radio-group v-model="data.options.progressType">
                        <el-radio-button label="line">线</el-radio-button>
                        <el-radio-button label="circle">圆</el-radio-button>
                        <el-radio-button label="dashboard">仪表</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="当前状态">
                    <el-radio-group v-model="data.options.status">
                        <el-radio-button label="success">成功</el-radio-button>
                        <el-radio-button label="exception">异常</el-radio-button>
                        <el-radio-button label="warning">警告</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="显示文字">
                    <el-switch
                            v-model="data.options.showText">
                    </el-switch>
                </el-form-item>
                <el-form-item label="进度">
                    <el-input-number v-model="data.options.percentage" :min="1" :max="100"></el-input-number>
                </el-form-item>
                <el-form-item label="进度条宽度">
                    <el-input-number v-model="data.options.strokeWidth" :min="1" :max="100"></el-input-number>
                </el-form-item>

                <el-form-item label="内显示">
                    <el-switch
                            v-model="data.options.textInside">
                    </el-switch>
                </el-form-item>


            </template>

            <template v-if="data.type=='breadcrumb' ">
                <draggable tag="ul" :list="data.options.breadcrumbItemOptions"
                           v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                           handle=".drag-item"
                >
                    <li v-for="(item, index) in data.options.breadcrumbItemOptions" :key="index">
                        <span
                                :label="item.value"
                                style="margin-right: 5px;"
                        >
                            <el-input style="width: 120px"
                                      size="mini" v-model="item.value"></el-input>
                              <el-switch v-model="item.replace"></el-switch>

                            <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                      v-model="item.label"></el-input>
                        </span>
                        <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                class="iconfont icon-icon_bars"></i></i>
                        <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                   size="mini" icon="el-icon-minus"
                                   style="padding: 4px;margin-left: 5px;"></el-button>

                    </li>
                </draggable>


                <div style="margin-left: 22px;">

                    <el-button @click="handleAddItemOptions" type="primary" icon="el-icon-plus">添加选项</el-button>
                </div>

            </template>

            <template v-if="data.type=='breadcrumb' ">

                <el-form-item label="分隔符" style="margin-top: 22px;">
                    <el-input class="custom_input" v-model="data.options.separator"></el-input>
                </el-form-item>

            </template>

            <template v-if="data.type=='link' ">
                <el-form-item label="链接名称">
                    <el-input class="custom_input" v-model="data.options.defaultValue"></el-input>
                </el-form-item>
                <el-form-item label="链接URL">
                    <el-input class="custom_input" v-model="data.options.href"></el-input>
                </el-form-item>
                <el-form-item label="下划线">
                    <el-switch
                            v-model="data.options.underline">
                    </el-switch>
                </el-form-item>

            </template>

            <template v-if="data.type=='collapse' ">
                <el-form-item label="手风琴">
                    <el-switch v-model="data.options.accordion">
                    </el-switch>
                </el-form-item>
                <el-form-item label="面板">
                    <draggable tag="ul" :list="data.options.options"
                               v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                               handle=".drag-item"
                    >
                        <li v-for="(item, index) in data.options.options" :key="index">
                            <el-radio v-model="data.options.activeName"
                                      :label="item.value"
                                      style="margin-right: 5px;"
                            >
                                <el-input :style="{'width': data.options.showLabel? '90px': '180px' }"
                                          size="mini" v-model="item.value"></el-input>
                                <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                          v-model="item.label"></el-input>
                            </el-radio>
                            <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                    class="iconfont icon-icon_bars"></i></i>
                            <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                       size="mini" icon="el-icon-minus"
                                       style="padding: 4px;margin-left: 5px;"></el-button>

                        </li>
                    </draggable>
                    <div style="margin-left: 22px;">

                        <el-button @click="handleAddCollapseOption" type="primary" icon="el-icon-plus">添加选项</el-button>
                    </div>
                </el-form-item>

            </template>
            <template v-if="data.type=='btn' ">

                <el-form-item label="文本">
                    <el-input class="custom_input" v-model="data.options.name"></el-input>
                </el-form-item>
                <el-form-item label="组件尺寸" >


                    <template>
                        <el-radio-group v-model="data.options.radioSize">
                            <el-radio-button label="medium">大型</el-radio-button>
                            <el-radio-button label="small">小型</el-radio-button>
                            <el-radio-button label="mini">迷你</el-radio-button>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="类型" >

                    <template>
                        <el-select v-model="data.options.type" placeholder="请选择">
                            <el-option
                                    v-for="item in btnOptionsType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="朴素" >

                    <el-switch v-model="data.options.plain"></el-switch>
                </el-form-item>
                <el-form-item label="圆角" >

                    <el-switch v-model="data.options.round"></el-switch>
                </el-form-item>
                <el-form-item label="圆形" >

                    <el-switch v-model="data.options.circle"></el-switch>
                </el-form-item>
                <el-form-item label="加载中" >

                    <el-switch v-model="data.options.loading"></el-switch>
                </el-form-item>
                <el-form-item label="按钮图标" class="custom_input">
                    <icon-picker v-model="data.options.icon"></icon-picker>
                </el-form-item>
                <el-form-item label="按钮偏移" class="custom_input">

                    <el-tooltip class="item" effect="dark" placement="top-start">
                        <div slot="content">支持百分比或者像素
                            <br>px或者%需要填写
                        </div>

                        <el-input class="custom_input" v-model="data.options.marginLeft"></el-input>

                    </el-tooltip>


                </el-form-item>
                <el-form-item label="点击事件" >
                    <el-tooltip class="item" effect="dark" placement="top-start">
                        <div slot="content">在JS增强输入框里除了可以用挂载到window中的全局变量之外，
                            <br/>还可以用我们给你封装好的几个变量以及方法，
                            <br/> 他们分别如下
                            <br/>  vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
                            <br/>api 封装了一下api，具体如下
                            <br/> api.getFormData(key)
                            <br/>setFormData(key, value) 设置form表单的值 show(key) 显示一个或多个组件
                            <br/>hide(key) 隐藏一个或多个组件 api.validate()校验表单
                            <br/>api.resetFields() 重置表单
                        </div>

                        <el-input class="custom_input" v-model="data.options.jsExpand" type="textarea" :rows="6" clearable></el-input>
                    </el-tooltip>



                </el-form-item>
            </template>
            <template v-if="data.type=='alert' ">
                <el-form-item label="标题">
                    <el-input class="custom_input" v-model="data.options.title"></el-input>
                </el-form-item>
                <el-form-item label="关闭按钮文字">
                    <el-input class="custom_input" v-model="data.options.closeText"></el-input>
                </el-form-item>
                <el-form-item label="主题">

                    <el-select v-model="data.options.alertType" placeholder="请选择">
                        <el-option
                                v-for="item in alertType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择提供主题">

                    <el-select v-model="data.options.item" placeholder="请选择">
                        <el-option
                                v-for="item in effectType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示图标" class="custom_input">
                    <el-switch v-model="data.options.showIcon">
                    </el-switch>
                </el-form-item>
                <el-form-item label="可关闭" class="custom_input">
                    <el-switch v-model="data.options.closable">
                    </el-switch>
                </el-form-item>
                <el-form-item label="文字居中" class="custom_input">
                    <el-switch v-model="data.options.center">
                    </el-switch>
                </el-form-item>

            </template>
            <template v-if="data.type=='icon' ">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>
                </el-form-item>


            </template>
            <template v-if="data.type=='card' ">

                <el-form-item label="头部">
                    <el-input class="custom_input" v-model="data.options.header"></el-input>
                </el-form-item>
                <el-form-item label="阴影" label-width="50px">
                    <el-radio-group v-model="data.options.shadow">
                        <el-radio-button label="always">一直</el-radio-button>
                        <el-radio-button label="hover">鼠标悬停</el-radio-button>
                        <el-radio-button label="never">从不</el-radio-button>
                    </el-radio-group>
                </el-form-item>


            </template>

            <template v-if="data.type=='steps' ">
                <el-form-item label="重置进度">
                    <el-button @click="handleResetOptions" type="primary" icon="el-icon-plus">重置</el-button>
                </el-form-item>

                <el-form-item label="居中对齐">
                    <el-switch
                            v-model="data.options.alignCenter">
                    </el-switch>
                </el-form-item>
                <el-form-item label="简洁风格">
                    <el-switch
                            v-model="data.options.simple">
                    </el-switch>
                </el-form-item>
                <el-form-item label="当前步骤状态">
                    <el-select
                            v-model="data.options.processStatus">
                        <el-option v-for="item in finishStatus" :key="item.value" :value="item.value"
                                   :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结束步骤状态">
                    <el-select
                            v-model="data.options.finishStatus">
                        <el-option v-for="item in finishStatus" :key="item.value" :value="item.value"
                                   :label="item.label"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="方向">
                    <el-radio-group v-model="data.options.direction" @change="directionChange($event)" size="small">
                        <el-radio-button label="horizontal">水平</el-radio-button>
                        <el-radio-button label="vertical">垂直</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <!--                <el-form-item label="步骤间距" >-->
                <!--                    <el-input-number v-model="data.options.space" :min="0" :max="9999" :step="1"></el-input-number>-->
                <!--                </el-form-item>-->

                <draggable tag="ul" :list="data.options.stepItemOptions"
                           v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                           handle=".drag-item"
                >
                    <li v-for="(item, index) in data.options.stepItemOptions" :key="index">
                        <span
                                :label="item.value"
                                style="margin-right: 5px;"
                        >
                            <el-input style="width: 120px"
                                      size="mini" v-model="item.value"></el-input>
                        </span>
                        <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                class="iconfont icon-icon_bars"></i></i>
                        <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                   size="mini" icon="el-icon-minus"
                                   style="padding: 4px;margin-left: 5px;"></el-button>

                    </li>
                </draggable>


                <div style="margin-left: 22px;margin-top: 2px">

                    <el-button @click="handleAddStepItemOptions" type="primary" icon="el-icon-plus">添加选项</el-button>
                </div>


            </template>


            <template v-if="data.type=='tag' ">

                <el-checkbox-group v-model="data.options.defaultValue" @change="changeCheckbox">
                    <draggable tag="ul" :list="data.options.options"
                               v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                               handle=".drag-item"
                    >
                        <li v-for="(item, index) in data.options.options" :key="index">
                            <el-checkbox
                                    :label="item.value"
                                    style="margin-right: 5px;"

                            >
                                <el-input style="width:90px;"
                                          size="mini" v-model="item.value"></el-input>
                                <el-input style="width:90px;" size="mini"
                                          v-model="item.label"></el-input>
                            </el-checkbox>
                            <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                    class="iconfont icon-icon_bars"></i></i>
                            <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                       size="mini" icon="el-icon-minus"
                                       style="padding: 4px;margin-left: 5px;"></el-button>


                        </li>
                    </draggable>
                </el-checkbox-group>


                <div style="margin-left: 22px;">

                    <el-button @click="handleAddOption" type="primary" icon="el-icon-plus">添加选项</el-button>
                </div>
            </template>

            <el-form-item label="选项"
                          v-if="Object.keys(data.options).indexOf('options')>=0 && data.type!='tabs' && data.type!='tag'&& data.type!='collapse' ">
                <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
                    <el-radio-button :label="false">固定选项</el-radio-button>

                    <el-radio-button v-if="data.type!='checkbox'" :label="true">动态选项</el-radio-button>
                </el-radio-group>
                <template v-if="data.options.remote && data.options.type!='checkbox'">
                    <div>
                        <el-form-item label="接口">
                            <el-select v-model="data.options.remoteUrlKey" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in remoteFuncs"
                                        :key="item.alias"
                                        :label="item.name"
                                        :value="item.alias">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="操作" v-if="data.options.remoteUrlKey">
                            <el-button @click="handleAddEffects" type="danger" icon="el-icon-s-promotion">级联设置</el-button>
                        </el-form-item>
                        <!--                        <div class="input-group">-->
                        <!--                            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;值：</span>-->
                        <!--                            <el-select v-model="data.options.props.value"  clearable  placeholder="请选择" @click.native="getRemoteField"-->

                        <!--                                       @change="getRemoteField">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in remoteFuncsFields"-->
                        <!--                                        :key="item.description"-->
                        <!--                                        :label="item.defaultValue"-->
                        <!--                                        :value="item.description">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </div>-->

                        <!--                        <div class="input-group">-->
                        <!--                            <span class="input-group-addon">标签：</span>-->
                        <!--                            <el-select v-model="data.options.props.label"  clearable   placeholder="请选择" @click.native="getRemoteField"-->

                        <!--                                       @change="getRemoteField">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in remoteFuncsFields"-->
                        <!--                                        :key="item.description"-->
                        <!--                                        :label="item.defaultValue"-->
                        <!--                                        :value="item.description">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </div>-->

                    </div>
                </template>
                <template v-else>
                    <template v-if="data.type=='radio'  || (data.type=='select'&&!data.options.multiple)">
                        <el-radio-group v-model="data.options.defaultValue">
                            <draggable tag="ul" :list="data.options.options"
                                       v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                       handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index">
                                    <el-radio
                                            :label="item.value"
                                            style="margin-right: 5px;"
                                    >
                                        <el-input :style="{'width': data.options.showLabel? '90px': '180px' }"
                                                  size="mini" v-model="item.value"></el-input>
                                        <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                                  v-model="item.label"></el-input>
                                        <!-- <input v-model="item.value"/> -->
                                    </el-radio>
                                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                            class="iconfont icon-icon_bars"></i></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                               size="mini" icon="el-icon-minus"
                                               style="padding: 4px;margin-left: 5px;"></el-button>

                                </li>
                            </draggable>
                        </el-radio-group>
                    </template>

                    <template v-if=" (data.type=='select' && data.options.multiple)">
                        <el-checkbox-group v-model="data.options.defaultValue">
                            <draggable tag="ul" :list="data.options.options"
                                       v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                       handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index">
                                    <el-checkbox
                                            :label="item.value"
                                            style="margin-right: 5px;"
                                    >
                                        <el-input :style="{'width': data.options.showLabel? '90px': '180px' }"
                                                  size="mini" v-model="item.value"></el-input>
                                        <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                                  v-model="item.label"></el-input>
                                    </el-checkbox>
                                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                            class="iconfont icon-icon_bars"></i></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                               size="mini" icon="el-icon-minus"
                                               style="padding: 4px;margin-left: 5px;"></el-button>

                                </li>
                            </draggable>
                        </el-checkbox-group>

                    </template>
                    <template v-if="data.type=='checkbox' ">
                        <el-checkbox-group v-model="data.options.defaultValues">
                            <draggable tag="ul" :list="data.options.options"
                                       v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                       handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index">
                                    <el-checkbox  @change="changeCheckbox"
                                                  :label="item.value"
                                                  style="margin-right: 5px;"
                                    >
                                        <el-input :style="{'width': data.options.showLabel? '90px': '180px' }"
                                                  size="mini" v-model="item.value"></el-input>
                                        <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                                  v-model="item.label"></el-input>
                                    </el-checkbox>
                                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                            class="iconfont icon-icon_bars"></i></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                               size="mini" icon="el-icon-minus"
                                               style="padding: 4px;margin-left: 5px;"></el-button>

                                </li>
                            </draggable>
                        </el-checkbox-group>

                </template>
                </template>
                <div style="margin-left: 22px;">
                    <el-button @click="handleAddOption" type="primary" icon="el-icon-plus">添加选项</el-button>
                    <el-button v-if="data.type!='checkbox'" @click="handleAddEffects" type="danger" icon="el-icon-s-promotion">级联设置
                    </el-button>

                </div>
            </el-form-item>
            <template v-if="data.type=='tabs'">
                <el-form-item label="自撑开">
                    <el-switch v-model="data.options.stretch">
                    </el-switch>
                </el-form-item>
                <el-form-item label="位置">
                    <el-select v-model="data.options.tabPosition" placeholder="请选择">
                        <el-option
                                v-for="item in tabPosition"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风格">
                    <el-select v-model="data.options.tabsType" placeholder="请选择">
                        <el-option
                                v-for="item in tabsType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="标签页">
                    <draggable tag="ul" :list="data.options.options"
                               v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                               handle=".drag-item"
                    >
                        <li v-for="(item, index) in data.options.options" :key="index">
                            <el-radio v-model="data.options.activeName"
                                      :label="item.value"
                                      style="margin-right: 5px;"
                            >
                                <el-input :style="{'width': data.options.showLabel? '90px': '180px' }"
                                          size="mini" v-model="item.value"></el-input>
                                <el-input style="width:90px;" size="mini" v-if="data.options.showLabel"
                                          v-model="item.label"></el-input>
                            </el-radio>
                            <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                    class="iconfont icon-icon_bars"></i></i>
                            <el-button @click="handleOptionsRemove(index)" circle plain type="danger"
                                       size="mini" icon="el-icon-minus"
                                       style="padding: 4px;margin-left: 5px;"></el-button>

                        </li>
                    </draggable>
                    <div style="margin-left: 22px;">

                        <el-button @click="handleAddTabsOption" type="primary" icon="el-icon-plus">添加选项</el-button>
                    </div>
                </el-form-item>

            </template>

            <el-form-item label="级联方式" v-if="data.type=='cascader'">
                <div>

                    <el-select v-model="data.options.modeMethod" placeholder="请选择" @change="changeCity($event)">
                        <el-option
                                v-for="item in cityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <!--                    <el-input size="mini" style="" v-model="data.options.props.value">-->
                    <!--                        <template slot="prepend">值</template>-->
                    <!--                    </el-input>-->
                    <!--                    <el-input size="mini" style="" v-model="data.options.props.label">-->
                    <!--                        <template slot="prepend">标签</template>-->
                    <!--                    </el-input>-->
                    <!--                    <el-input size="mini" style="" v-model="data.options.props.children">-->
                    <!--                        <template slot="prepend">子选项</template>-->
                    <!--                    </el-input>-->
                </div>
            </el-form-item>
            <el-form-item label="文本内容"
                          v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (  data.type == 'text' )">

                <el-input class="custom_input" v-if="data.type=='input' || data.type == 'text'"
                          v-model="data.options.defaultValue"></el-input>


            </el-form-item>
            <el-form-item label="是否加粗"
                          v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (  data.type == 'text' )">
                <el-switch v-model="data.options.bold" active-text="是否加粗">
                </el-switch>
            </el-form-item>
            <el-form-item label="字体颜色"
                          v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (  data.type == 'text' )">
                <el-color-picker
                        v-model="data.options.color"
                        show-alpha
                        :predefine="predefineColors">
                </el-color-picker>
            </el-form-item>
            <el-form-item label="字体样式"
                          v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (  data.type == 'text' )">
                <el-input class="custom_input" v-model="data.options.fontSize" placeholder="字体大小（px）"
                          type="number"></el-input>


            </el-form-item>


            <el-form-item label="默认值"
                          v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (  data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')">
                <el-input class="custom_input" v-if="data.type=='textarea'" type="textarea" :rows="2"
                          v-model="data.options.defaultValue"></el-input>
                <el-input class="custom_input" v-if="data.type=='input' || data.type == 'text'"
                          v-model="data.options.defaultValue"></el-input>
                <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;"
                         :max="data.options.max" :allow-half="data.options.allowHalf"
                         v-model="data.options.defaultValue"></el-rate>
                <el-button type="text" v-if="data.type == 'rate'"
                           style="display:inline-block;vertical-align: middle;margin-left: 10px;"
                           @click="data.options.defaultValue=0">清空
                </el-button>
                <el-color-picker
                        v-if="data.type == 'color'"
                        v-model="data.options.defaultValue"
                        :show-alpha="data.options.showAlpha"
                ></el-color-picker>
                <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
            </el-form-item>


            <template v-if="data.type == 'input' ">

                <!--               非日期-->
                <el-checkbox v-model="data.options.dateCalculation">日期计算
                </el-checkbox>
                <div v-if="data.options.dateCalculation" class="ng-scope">
                    <div class="input-group">
                        <span class="input-group-addon">开始日期：</span>
                        <el-select v-model="data.options.dateCalculationStart" placeholder="请选择"
                                   @click.native="getAllDate"

                                   @change="getAllDate">
                            <el-option
                                    v-for="item in dateValue"
                                    :key="item.model"
                                    :label="item.name"
                                    :value="item.model">
                            </el-option>
                        </el-select>
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">结束日期：</span>
                        <el-select v-model="data.options.dateCalculationEnd" placeholder="请选择"
                                   @click.native="getAllDate"
                                   @change="getAllDate">
                            <el-option
                                    v-for="item in dateValue"
                                    :key="item.model"
                                    :label="item.name"
                                    :value="item.model">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="input-group" style="margin-top: 10px;">


                        <el-form-item label="计算周期">

                            <el-radio-group v-model="data.options.dateCalcDiffType">
                                <!--                            <el-radio label="month">月份</el-radio>-->
                                <el-radio label="day">天</el-radio>
                                <el-radio label="hour">小时</el-radio>
                                <el-radio label="minute">分钟</el-radio>
                                <el-radio label="second">秒</el-radio>
                            </el-radio-group>
                        </el-form-item>


                    </div>
                </div>
            </template>
            <template v-if="data.type == 'date'">
                <!--                日期校验-->
                <div class="input-group" style="margin-top: 10px;">

                    <div class="input-group">

                        <el-form-item label="日期校验" v-if="data.type == 'date'" label-width="100px">

                            <el-radio-group v-model="data.options.dateValidRule">
                                <!--                            <el-radio label="month">月份</el-radio>-->
                                <el-radio label=">=">大于等于</el-radio>
                                <el-radio label="<=">小于等于</el-radio>
                                <el-radio label=">">大于</el-radio>
                                <el-radio label="<">小于</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </div>


                    <div class="input-group">

                        <el-form-item label="其他日期" v-if="data.type == 'date'">
                            <el-select v-model="data.options.ckeckedDatevalidType" placeholder="请选择"
                                       @click.native="getAllDateNotSelf"
                                       @change="changeDateRule($event, item)">
                                <el-option
                                        v-for="item in dateValue"
                                        :key="item.model"
                                        :label="item.name"
                                        :value="item.model">
                                </el-option>
                            </el-select>


                        </el-form-item>


                    </div>


                </div>
            </template>
            <template v-if="data.type == 'time' || data.type == 'date'">
                <el-form-item label="日期类型" v-if="data.type == 'date'">
                    <el-select v-model="data.options.type" placeholder="请选择日期类型">
                        <el-option
                                v-for="item in formatDateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>


                </el-form-item>


                <el-form-item label="格式">


                    <el-select v-model="data.options.format" placeholder="请选择时间格式"
                               @change="onSelectedDateType($event, item)">
                        <el-option
                                v-for="item in formatOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="默认值" v-if="data.type=='time' && Object.keys(data.options).indexOf('rangeAble')>=0">
                    <el-time-picker
                            key="1"
                            style="width: 100%;"
                            v-if="!data.options.rangeAble"
                            v-model="data.options.defaultValue"
                            :arrowControl="data.options.arrowControl"
                            :value-format="data.options.format"
                    >
                    </el-time-picker>
                    <el-time-picker
                            key="2"
                            v-if="data.options.rangeAble"
                            style="width: 100%;"
                            v-model="data.options.defaultValue"
                            is-range
                            :arrowControl="data.options.arrowControl"
                            :value-format="data.options.format"
                    >
                    </el-time-picker>
                </el-form-item>
            </template>
            <template v-if="data.type=='imgupload'">
                <el-form-item label="支持的类型" label-width="100px">
                    <el-row :span="30">
                        <el-checkbox-group v-model="data.options.supportedTypes">
                          <span v-for="(item, index) in data.options.supportedAllTypes" :key="index"
                                @change="supportedTypeChange(item)">

                                <el-checkbox :label="item">
                          </el-checkbox>
                          </span>
                        </el-checkbox-group>
                    </el-row>

                </el-form-item>
            </template>
            <template v-if="data.type=='fileUpload'">
                <el-form-item label="最大上传数">
                    <el-input class="custom_input" type="number" v-model.number="data.options.length"></el-input>
                </el-form-item>
                <el-form-item label="支持的类型" label-width="100px">
                    <el-row :span="30">
                        <el-checkbox-group v-model="data.options.supportedTypes">
                          <span v-for="(item, index) in data.options.supportedAllTypes" :key="index"
                                @change="supportedTypeChange(item)">

                                <el-checkbox :label="item">
                          </el-checkbox>
                          </span>
                        </el-checkbox-group>
                    </el-row>

                    <!--          <el-checkbox-group v-model="curUpLoadAcceptList">-->
                    <!--            <el-checkbox v-for="mpb in curUpLoadAcceptList"  :key="mpb.id" :label="mpb.id" @change="checkinlist">{{mpb.name}}</el-checkbox>-->

                    <!--          </el-checkbox-group>-->

                </el-form-item>

                <!--        <el-form-item label="使用七牛上传">-->
                <!--          <el-switch v-model="data.options.isQiniu"></el-switch>-->
                <!--        </el-form-item>-->
                <template v-if="data.options.isQiniu">
                    <el-form-item label="Domain" :required="true">
                        <el-input v-model="data.options.domain"></el-input>
                    </el-form-item>
                    <el-form-item label="获取七牛Token方法" :required="true">
                        <el-input v-model="data.options.tokenFunc"></el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="上传地址" :required="true">
                        <el-input class="custom_input" v-model="data.options.action"></el-input>
                    </el-form-item>
                </template>


            </template>

            <template v-if="data.type=='imgupload'">

                <el-form-item label="最大上传数">
                    <el-input  class="custom_input" type="number" v-model.number="data.options.length"></el-input>
                </el-form-item>
                <template >
                    <el-form-item label="上传地址" :required="true">
                        <el-input class="custom_input" v-model="data.options.action"></el-input>
                    </el-form-item>
                </template>
            </template>

            <template v-if="data.type=='blank'">
                <el-form-item label="绑定数据类型">
                    <el-select v-model="data.options.defaultType">
                        <el-option value="String" label="字符"></el-option>
                        <el-option value="Object" label="对象"></el-option>
                        <el-option value="Array" label="数组"></el-option>
                    </el-select>
                </el-form-item>
            </template>
            <template v-if="data.type == 'vue2Editor'">

                <el-form-item label="上传地址" :required="true">
                    <el-input class="custom_input" v-model="data.options.action"></el-input>
                </el-form-item>
            </template>
            <template v-if="data.type == 'grid' || data.type=='subTable'">
<!--                <el-form-item label="子表名称">-->
<!--                    <el-input type="text" v-model.number="data.options.subTableName"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="栅格间隔">
                    <el-input class="custom_input"  type="number" v-model.number="data.options.gutter"></el-input>
                </el-form-item>
                栅格配置
                    <draggable tag="ul" :list="data.columns"
                               v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                               handle=".drag-item"
                    >
                            <li v-for="(item, index) in data.columns" :key="index" style="margin-left: 80px">

                                <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i
                                        class="iconfont icon-icon_bars"></i></i>
                                <el-input   placeholder="栅格值" size="mini" style="width: 90px;" type="number"
                                            v-model.number="item.span"></el-input>

                                <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini"
                                           icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                            </li>


                    </draggable>
                    <div style="margin-left: 22px;">
                        <el-button type="text" @click="handleAddColumn">添加列</el-button>
                    </div>
            </template>

            <el-form-item label="自定义Class" v-if="Object.keys(data.options).includes('customClass')">
                <el-input class="custom_input" v-model="data.options.customClass" clearable></el-input>
            </el-form-item>


            <template v-if="data.type=='h4'">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>


                </el-form-item>
            </template>
            <template v-if="data.type=='p'">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>


                </el-form-item>
            </template>
            <template v-if="data.type=='small'">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>


                </el-form-item>
            </template>
            <template v-if="data.type=='mark'">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>


                </el-form-item>
            </template>
            <template v-if="data.type=='del' || data.type=='u'|| data.type=='em'|| data.type=='strong'">
                <el-form-item label="文本">
                    <el-input class="custom_input" type="textarea" v-model="data.options.defaultValue"></el-input>


                </el-form-item>
            </template>

            <template v-if="data.type != 'grid' && data.type!='subTable'">

                <!--                <el-form-item label="数据绑定Key">-->
                <!--                    <el-input v-model="data.model"></el-input>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="操作属性"-->
                <!--                              v-if="data.type!='processInfo' && data.type!='radio' && data.type!='checkbox' && data.type!='iframe' && data.type!='divider' && data.type!='text' && data.type!='dialog'&& data.type!='userDialog'  ">-->
                <!--                    <el-checkbox v-model="data.options.readonly"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.disabled"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.showPassword"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('showPassword')>=0">是否密码框-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.editable"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.clearable"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.arrowControl"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.isDelete"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('isDelete')>=0">删除-->
                <!--                    </el-checkbox>-->
                <!--                    <el-checkbox v-model="data.options.editable"-->
                <!--                                 v-if="Object.keys(data.options).indexOf('editable')>=0">编辑-->
                <!--                    </el-checkbox>-->

                <!--                </el-form-item>-->
                <!--                <el-form-item label="校验"-->
                <!--                              v-if="data.type!='processInfo' && data.type!='dateCalendar' && data.type!='tag' && data.type!='progress' && data.type!='link'  && data.type!='tabs' && data.type!='date' && data.type!='block' && data.type!='table'  && data.type!='iframe' && data.type!='divider' && data.type!='text' && data.type!='dialog'&& data.type!='userDialog' && data.type!='fileUpload' ">-->
                <!--                    <div v-if="Object.keys(data.options).indexOf('required')>=0">-->
                <!--                        <el-checkbox v-model="data.options.required">必填</el-checkbox>-->
                <!--                    </div>-->


                <!--                </el-form-item>-->

                <el-form-item label="校验方式"   v-if="Object.keys(data.options).indexOf('dataType')>=0" >
                    <el-select @change="onSelectedDataType($event)"
                               v-model="data.options.dataType"
                               size="mini">
                        <el-option
                                v-for="item in rulesList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-table v-if="Object.keys(data.options).indexOf('dataType')>=0"
                              :data="data.rules"
                              style="width: 100%">
                        <el-table-column
                                label="提示"
                                width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.msg"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-form-item>
                                    <div v-if="scope.row.val!=undefined">
                                        <div v-if="scope.row.customerType == 'regular'">
                                            <el-input v-model="scope.row.val"/>
                                        </div>

                                        <div v-else>

                                            <el-input v-model.number="scope.row.val"
                                                      type="number"/>
                                        </div>
                                    </div>
                                    <div v-else>

                                        <div v-if="scope.row.customerType == 'connector'">
                                            <el-input v-model="scope.row.connector"/>
                                        </div>

                                    </div>

                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>


                <el-form-item label="布局"
                              v-if="data.type!='grid' && data.type!='subTable'&& data.type!='dividers' && data.type!='divider' && data.type!='block' && data.type!='table'"
                              label-width="50px">
                    <el-col :span="30">
                        <el-radio-group v-model="data.options.span" @change="layOutableColumnsChange($event)"
                                        size="small">
                            <el-radio-button label="24">单行</el-radio-button>
                            <el-radio-button label="12">两列</el-radio-button>
                            <el-radio-button label="8">三列</el-radio-button>
                            <el-radio-button label="6">四列</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-form-item>
            </template>
        </el-form>

    </div>


    <!--    <ChildComponent ref="child"></ChildComponent>-->
</template>

<script>

    import Draggable from 'vuedraggable'

    import widgetForm from './WidgetForm'
    import widgetFormItem from './WidgetFormItem'
    import {verification} from './router/verification.js'

    import {basicComponents, advanceComponents,layoutComponents,navigationComponents,uncommonlyUsedComponents} from './componentsConfig.js'
    import request from '../util/request.js'
    import API from './router/api.js'
    import {getDateControls} from './router/utils'
    import {
        validatePhone,
        validateIdNo,
        validateEMail,
        validateURL,
        validatePwd,
        validateDate,
        validateReg
    } from './validate.js'
    import MakingForm from './Container.vue'

    function checkIsNullOrEmpty(value) {
        var reg = /^\s*$/;
        return value != null && value != undefined && !reg.test(value);
    }

    export default {
        components: {
            Draggable,
            widgetForm,
            basicComponents,
            MakingForm,
            widgetFormItem

        },
        // 父组件传递的data
        props: ['data', 'structData'],
        mounted() {
        },
        data() {
            return {
                hiddenTableHeader: false,

                setCustDialogResFormVisible: false,
                dateValue: [],
                customDialogDataValue: [],
                resultFieldArray: [],
                num: 2,
                formProperties:[],
                controlsItem: [],
                dialogFormVisible: false,
                remoteFuncs: [],
                remoteFuncsFields: [],
                userDialogSelectorList: [
                    {"label": "用户选择器", value: "user-selector"},
                    {"label": "角色选择器", value: "role-selector"},

                ],
                finishStatus: [
                    {
                        value: 'wait',
                        label: '等待'
                    }
                    , {
                        value: 'process',
                        label: '处理中'
                    }
                    , {
                        value: 'finish',
                        label: '结束'
                    }
                    , {
                        value: 'error',
                        label: '错误'
                    }
                    , {
                        value: 'success',
                        label: '成功'
                    }
                ],

                unitOptions: [{
                    label: '长度',
                    options: [{
                        value: '微米',
                        label: '微米'
                    }
                        , {
                            value: '毫米',
                            label: '毫米'
                        }
                        , {
                            value: '厘米',
                            label: '厘米'
                        }
                        , {
                            value: '分米',
                            label: '分米'
                        }
                        , {
                            value: '米',
                            label: '米'
                        }
                        , {
                            value: '十米',
                            label: '十米'
                        }
                        , {
                            value: '百米',
                            label: '百米'
                        }
                        , {
                            value: '千米',
                            label: '千米'
                        }
                    ]
                }
                    , {
                        label: '面积',
                        options: [{
                            value: '平方厘米',
                            label: '平方厘米'
                        }
                            , {
                                value: '平方分米',
                                label: '平方分米'
                            }
                            , {
                                value: '平方米',
                                label: '平方米'
                            }
                            , {
                                value: '公顷',
                                label: '公顷'
                            }
                            , {
                                value: '平方千米',
                                label: '平方千米'
                            }
                        ]

                    }
                    , {
                        label: '体积',
                        options: [{
                            value: '立方厘米',
                            label: '立方厘米'
                        }
                            , {
                                value: '立方分米',
                                label: '立方分米'
                            }
                            , {
                                value: '平方米',
                                label: '平方米'
                            }

                        ]

                    }

                    , {
                        label: '容量',
                        options: [{
                            value: '厘升',
                            label: '厘升'
                        }
                            , {
                                value: '分升',
                                label: '分升'
                            }
                            , {
                                value: '升',
                                label: '升'
                            }
                            , {
                                value: '十升',
                                label: '十升'
                            }
                            , {
                                value: '百升',
                                label: '百升'
                            }
                            , {
                                value: '千升',
                                label: '千升'
                            }

                        ]

                    }
                    , {
                        label: '质量',
                        options: [{
                            value: '厘克',
                            label: '厘克'
                        }
                            , {
                                value: '分克',
                                label: '分克'
                            }
                            , {
                                value: '克',
                                label: '克'
                            }
                            , {
                                value: '十克',
                                label: '十克'
                            }
                            , {
                                value: '百克',
                                label: '百克'
                            }
                            , {
                                value: '千克',
                                label: '千克'
                            }
                            , {
                                value: '吨',
                                label: '吨'
                            }

                        ]

                    }


                ],
                rulesList: [
                    {id: 'nonull', name: '必填', prompt: ""},
                    {id: 'isnum', name: '数字', prompt: ""},
                    {id: 'min', name: '最小字符长度', prompt: ""},
                    {id: 'max', name: '最大字符长度', prompt: ""},
                    {id: 'phone', name: '手机号码', prompt: ""},
                    {id: 'url', name: 'URL地址', prompt: ""},
                    {id: 'email', name: '邮箱地址', prompt: ""},
                    {id: 'pwd', name: '密码校验', prompt: ""},
                    {id: 'idNumber', name: '身份证', prompt: ""},
                    {id: 'regular', name: '正则表达式', prompt: ""},
                    {id: 'string', name: '字符串', prompt: ""},
                    {id: 'connector', name: '接口', prompt: ""}
                ],
                blockLayout: 12,
                cityOptions: [
                    {
                        value: 'provinceAndCityData',
                        label: '省市二级联动（不带“全部”选项)'
                    }
                    , {
                        value: 'provinceAndCityDataPlus',
                        label: '省市二级联动（带“全部”选项)'
                    }
                    , {
                        value: 'regionData',
                        label: '省市区三级联动（不带“全部”选项)'
                    }
                    , {
                        value: 'selectedOptions',
                        label: '省市区三级联动（带“全部”选项）'
                    }
                ],
                tabPosition: [
                    {
                        value: 'top',
                        label: '上'
                    }
                    , {
                        value: 'right',
                        label: '右'
                    }
                    , {
                        value: 'bottom',
                        label: '下'
                    }
                    , {
                        value: 'left',
                        label: '左'
                    }
                ],
                tabsType: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: 'card',
                        label: '卡片'
                    }
                    , {
                        value: 'border-card',
                        label: '盒装'
                    }

                ],
                alertType: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: 'success',
                        label: '成功'
                    }
                    , {
                        value: 'warning',
                        label: '警告'
                    }
                    , {
                        value: 'info',
                        label: '默认'
                    }
                    , {
                        value: 'error',
                        label: '错误'
                    }

                ],
                btnOptionsType: [
                    {
                        value: 'primary',
                        label: '主要'
                    },
                    {
                        value: 'success',
                        label: '成功'
                    }
                    , {
                        value: 'warning',
                        label: '警告'
                    }
                    , {
                        value: 'info',
                        label: '信息'
                    }
                    , {
                        value: 'error',
                        label: '错误'
                    }
                    , {
                        value: 'danger',
                        label: '危险'
                    }
                    , {
                        value: 'text',
                        label: '文本'
                    }

                ],
                effectType: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: 'light',
                        label: '光亮'
                    }
                    , {
                        value: 'dark',
                        label: '黑暗'
                    }

                ],
                options: [{
                    label: '文本标签',
                    options: [{
                        value: 'input',
                        label: '单行'
                    }
                        , {
                            value: 'textarea',
                            label: '多行'
                        }
                        , {
                            value: 'text',
                            label: '文本'
                        }
                    ]
                },
                    {
                        label: '对话框',
                        options: [{
                            value: 'dialog',
                            label: '对话框'
                        }
                            , {
                                value: 'date',
                                label: '日期选择器'
                            }
                        ]

                    }
                    ,
                    {
                        label: '人员选择器',
                        options: [{
                            value: 'userDialog',
                            label: '人员选择器'
                        }
                            // , {
                            //     value: 'time',
                            //     label: '时间选择器'
                            // }
                        ]

                    }
                    ,


                    {
                        label: '组标签',
                        options: [{
                            value: 'checkbox',
                            label: '多选框组'
                        }, {
                            value: 'radio',
                            label: '单选框组'
                        }, {
                            value: 'select',
                            label: '下拉选择框'
                        }
                        ]

                    }
                    , {
                        lable: '人员选择',
                        options: [
                            {
                                value: 'persionSelect',
                                label: '人员选择框'
                            }
                        ]
                    }
                    , {
                        label: '流程标签',
                        options: [{
                            value: 'processInfo',
                            label: '审批记录'
                        }
                        ]

                    }
                    //   , {
                    //     label: '上传组件',
                    //     options: [
                    //       {
                    //         value: 'fileUpload',
                    //         label: '文件上传'
                    //       }
                    //     ]
                    //
                    //   }
                    , {
                        label: '富文本',
                        options: [
                            {
                                value: 'editor',
                                label: '富文本'
                            }
                        ]

                    }
                    , {
                        label: '其他',
                        options: [
                            {
                                value: 'rate',
                                label: '评分'
                            }, {
                                value: 'color',
                                label: '颜色选择器'
                            },
                            {
                                value: 'switch',
                                label: '开关'
                            },
                            {
                                value: 'slider',
                                label: '滑块'
                            }
                        ]

                    }


                ],
                res: [],  // 字段修改的配置
                radio1: 12,
                color: 'rgba(255, 69, 0, 0.68)',
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                curUpLoadAcceptList:
                    [
                        {
                            value: 'jpg',
                            label: 'jpg'
                        }
                        ,
                        {
                            value: 'jpeg',
                            label: 'jpeg'
                        }
                        ,
                        {
                            value: 'png',
                            label: 'png'
                        }
                        ,
                        {
                            value: 'bmp',
                            label: 'bmp'
                        }
                        ,
                        {
                            value: 'pdf',
                            label: 'pdf'
                        }
                        ,
                        {
                            value: 'JPG',
                            label: 'JPG'
                        }

                    ],

                formatOptions: [
                    {
                        value: 'yyyy-MM-dd',
                        label: '年-月-天'
                    }, {
                        value: 'yyyy-MM-dd HH:mm:ss',
                        label: '年-月-天 时:分:秒'
                    }
                    , {
                        value: 'yyyy-MM',
                        label: '年-月'
                    }
                    , {
                        value: 'HH:mm:ss',
                        label: '时:分:秒'
                    }

                ],

                formatDateOptions: [
                    {
                        value: 'year',
                        label: '年'
                    }, {
                        value: 'month',
                        label: '月'
                    }
                    , {
                        value: 'date',
                        label: '日期'
                    }
                    , {
                        value: 'dates',
                        label: '指定日期'
                    }
                    , {
                        value: 'datetime',
                        label: '标准日期'
                    }
                    , {
                        value: 'datetimerange',
                        label: '标准日期范围'
                    }
                    , {
                        value: 'daterange',
                        label: '日期范围'
                    }

                ],
                value: '',
                formatValue: '',
                basicComponents: basicComponents,
                advanceComponents: advanceComponents,
                layoutComponents: layoutComponents,
                navigationComponents: navigationComponents,
                uncommonlyUsedComponents: uncommonlyUsedComponents,

                validator: {   // 拖拽表单时,需要验证的字段
                    type: null,
                    required: null,
                    pattern: null,
                    range: null,
                    length: null
                },
            };
            // validator
            const validateNameInput = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('此项必填！'))
                } else {
                    callback()
                }
            }

            return {

                rules: {
                    login: [{validator: validateNameInput, trigger: 'blur'}]
                }
            }
        },
        computed: {
            show() {
                if (this.data && Object.keys(this.data).length > 0) {
                    return true
                }
                return false
            }
        },
        created() {
            var _self = this
            _self.getDataType()

            _self.initControlsItem();
            _self.initSelectDict();

        },

        methods: {
            changeCheckbox:function(data){
                debugger
            },
            changeFormProperties:function(params){
                let obj = {};
                obj = this.formProperties.find((item)=>{//这里的userList就是上面遍历的数据源
                    return item.value === params;//筛选出匹配数据
                });
                this.data.name=obj.label
            },
            unBindTarget: function (index) {
                this.data.options.chooseFiledList[index].target = ''
            },

            setCustDialogRes: function () {

                this.$nextTick(() => {
                    var customDialogAlias = this.data.options.customDialogAlias
                    if (this.data.options.chooseFiledList) {
                        if (this.data.options.chooseFiledList.length > 0) {
                            this.setCustDialogResFormVisible = true
                        } else {
                            if (customDialogAlias && customDialogAlias.length > 0) {
                                request.get(API.prefix + '/form/customDialog/get/code/' + customDialogAlias).then(res => {
                                    var options = res.data;
                                    try {
                                        var resultFieldArray = JSON.parse(options.resultFieldStr);
                                        var existArray = [];
                                        for (var i = 0; i < resultFieldArray.length; i++) {
                                            var resultFieldArrayObj = resultFieldArray[i]
                                            var obj = {};
                                            obj['model'] = resultFieldArrayObj.model;
                                            obj['columnKey'] = resultFieldArrayObj.columnKey;
                                            obj['target'] = "";
                                            existArray.push(obj)
                                        }

                                        this.data.options.chooseFiledList = existArray;
                                        this.setCustDialogResFormVisible = true
                                    } catch (e) {

                                    }


                                })

                            } else {
                                this.$message.error("请选择对话框");
                            }
                        }
                    }


                })

            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 1) {
                    return {
                        rowspan: 1,
                        colspan: 2
                    }
                }
            }
            ,
            addInnerRow: function (index) {
                var innerObj = {"target": "", "type": ""};
                this.data.options.effect[index].effects.push(innerObj)
            },
            delInnerRow: function (row, index) {
                this.data.options.effect[row].effects.splice(index, 1);
            },
            getDialogFormData: function (element) {
                if (element){
                    if(element.options.effect){
                        if (element.options.effect.length>0) {
                            return element.options.effect;
                        } else {
                            return []
                        }
                    }else{
                        return []
                    }

                } else{
                    return []
                }

            },
            dialogFormVisibleClose: function (element) {
                    this.dialogFormVisible=false
            },

            handleDeleteEffect: function (row, index) {
                this.data.options.effect.splice(index, 1);

            },
            initRemoteFuncs: function () {
                request.get(API.prefix + '/form/customQuery/listJson').then(res => {
                    var options = res.data;
                    this.remoteFuncs = options

                })
            },
            initControlsItem: function () {
                if (this.structData) {
                    var list = this.structData.list.filter((item) => {
                        return item.model != this.data.model;
                    });

                    this.controlsItem = list;

                }

            },
            initSelectDict: function () {
                try {
                    request.get(API.prefix + '/form/sys/test3').then(res => {
                        var options = res.data;
                        this.remoteFuncs = options

                    })
                }catch (e) {

                }


            },
            triggerData: function () {
            },

            changeDateRule: function ($event, item) {
                this.data.rules = []
                var data = {};
                data["validator"] = this.validatePass;
                data["trigger"] = "blur";
                data["msg"] = '日期校验不通过';
                data["customerType"] = 'dateRule';
                this.data.rules.push(data)
            },
            getAllDate: function () {
                this.$nextTick(() => {
                    var notTims = [];

                    if (this.structData) {
                        var struts = this.structData.list;
                        var notTims = getDateControls(struts, this.data.model)
                        this.dateValue = notTims
                    }

                })

            },
            getAllDialogDate: function () {

                this.$nextTick(() => {
                    request.get(API.prefix + '/form/customDialog/listJson?system=0').then(res => {
                        var options = res.data;
                        if (res.code == 0) {
                            this.customDialogDataValue = options;
                        }
                    })
                })


            },
            getAllUserDialogData: function () {


            },
            getAllUserDialogSelectorList: function () {
                this.$nextTick(() => {
                    request.get(API.prefix + '/form/customDialog/listJson?system=1').then(res => {
                        var options = res.data;
                        if (res.code == 0) {
                            this.userDialogSelectorList = options;
                        }
                    })
                })


            },
            initDialogFieldData: function () {


            },
            confirmFormCustomDialog: function () {
                this.setCustDialogResFormVisible = false;

            },
            getRemoteDict: function () {
                this.$nextTick(() => {
                    if (this.data) {
                        if (this.data.options.remoteUrlKey) {
                            var remoteUrlKey = this.data.options.remoteUrlKey
                            var notTims = [];
                            if (remoteUrlKey && remoteUrlKey.length > 0) {
                                request.get(API.prefix + remoteUrlKey).then(res => {
                                    var options = res.data;
                                    if (res.code == 0) {
                                    }
                                })
                            }
                        }
                    }

                })

            },
            getRemoteField: function () {

                this.$nextTick(() => {
                    if (this.data.options) {
                        if (this.data.options.remoteUrlKey) {
                            var remoteUrlKey = this.data.options.remoteUrlKey
                            var notTims = [];
                            ///form/customQuery/get/key/
                            if (remoteUrlKey && remoteUrlKey.length > 0) {
                                request.get(API.prefix + '/form/customQuery/get/key/' + remoteUrlKey).then(res => {
                                    var options = res.data;
                                    if (res.code == 0) {
                                        var resultFieldStr = res.data.resultFieldStr
                                        const obj = JSON.parse(resultFieldStr);
                                        this.remoteFuncsFields = obj;
                                    }
                                })
                            }
                        }
                    }

                })

            },

            getAllDateNotSelf: function () {
                this.$nextTick(() => {
                    var notTims = [];
                    var struts = this.structData.list;
                    var notTims = getDateControls(struts, this.data.model)
                    var notMe = notTims.filter(item => item.model != this.data.model)
                    this.dateValue = notMe
                })

            },
            onSelectedDataType: function (vId) {
                if (this.data.rules == null) {
                    this.data.rules = []
                }
                let obj = {};
                obj = this.rulesList.find((item) => {//这里的userList就是上面遍历的数据源
                    return item.id === vId;//筛选出匹配数据
                });
                //获取table数据
                var data = {};
                data["validator"] = this.validatePass;
                data["trigger"] = "blur";
                data["msg"] = obj.name;
                data["customerType"] = obj.id;
                if (obj.id == "min" || obj.id == "max" || "regular" == obj.id) {
                    data["val"] = 0;
                }
                if ("connector" == obj.id) {
                    data["connector"] = "";
                }

                var existRuleObj = this.data.rules.find((item) => {//这里的userList就是上面遍历的数据源
                    return item.type === vId;//筛选出匹配数据
                })
                if (!existRuleObj) {
                    this.data.rules.push(data)
                }
                if ("nonull" == vId) {
                    this.data.options.required = true
                }

            },
            validatePass(rule, info, callback) {
                var type = rule.customerType;
                var length = rule.val;
                verification(rule, info, callback, null)
            },
            layOutableColumnsChange: function (val, key) {
                this.data.options.span = Number(val);
            },
            directionChange: function (val, key) {
                this.data.options.direction = val;
            },

            // 栅格监听函数
            handleClick() {
                this.data.options.span = 6;
            },
            getDataType() {
                var _self = this
                if (this.$route) {
                    let params = this.$route.query;
                    if (params) {
                        var id = params.id;
                        if (id) {
                            request.get(API.prefix + '/form/bus/render/getStruct/' + id).then(res => {
                                var options = res.data;
                                this.formProperties = options

                            })
                        }

                    }
                }

            },
            supportedTypeChange: function (item) {
                var supportedTypes = this.data.options.supportedTypes
                var tmp = [];
                supportedTypes.forEach(function (item) {
                    tmp.push("." + item)
                });
                var supportedTypesStr = tmp.join(',');
                this.data.options.supportedTypeStr = supportedTypesStr
            },
            onEnterSearch: function (val, type) {
                var rules = this.data.rules;
                let item = rules.find(obj => obj.originateType === type);
                if (type == "min") {
                    item.message = "最小字符长度为" + val;
                } else if (type == "max") {
                    item.message = "最大字符长度为" + val;
                }
            },
            handleDelete(index, row) {
                var vm = this;
                if (this.data.rules[index].customerType == 'nonull') {
                    this.data.options.required = false
                }

                this.data.rules.splice(index, 1)
                vm.$forceUpdate();

            },
            handleOptionsRemove(index) {
                debugger
                if (this.data.type === 'grid' || this.data.type == 'subTable') {
                    this.data.columns.splice(index, 1)
                } else if (this.data.type === 'tabs') {
                    this.data.tabColumns.splice(index, 1)
                    this.data.options.options.splice(index, 1)
                } else if (this.data.type === 'breadcrumb') {
                    this.data.options.breadcrumbItemOptions.splice(index, 1)
                } else if (this.data.type === 'steps') {
                    this.data.options.stepItemOptions.splice(index, 1)
                } else if (this.data.type === 'collapse') {
                    this.data.options.options.splice(index, 1)
                } else {
                    this.data.options.options.splice(index, 1)
                }


            },
            handleAddOption() {
                if (this.data.options.showLabel) {
                    this.data.options.options.push({
                        value: '新选项',
                        label: '新选项'
                    })
                } else {
                    this.data.options.options.push({
                        value: '新选项'
                    })
                }

            },
            handleAddEffects: function () {

                var remote = this.data.options.remote
                if (remote) {
                    var remoteUrlKey =  this.data.options.remoteUrlKey
                    if (remoteUrlKey && remoteUrlKey.length > 0) {
                        request.get(API.prefix + remoteUrlKey).then(res => {
                            var options = res.data;
                            var datas = [];
                            if (res.code == 0) {
                                for (var i = 0; i < options.length; i++) {
                                    var obj = {};
                                    obj['label'] = options[i]['label']
                                    obj['value'] = options[i]['value']
                                    datas.push(obj)
                                }
                                this.remoteFuncsFields = datas;

                            }
                        })
                    }
                } else {
                    this.remoteFuncsFields = this.data.options.options
                }

                this.dialogFormVisible = true;

            },
            addListRow: function () {
                var innerObj = {"target": "", "type": ""};
                var innerArray = [];
                innerArray.push(innerObj);
                var obj = {
                    "value": "",
                    "type": "",
                    "commonRule": "",
                    "effects": innerArray
                };
                this.data.options.effect=this.data.options.effect.concat(obj)

            },

            handleAddItemOptions() {
                this.data.options.breadcrumbItemOptions.push({
                    value: '活动页' + (this.data.options.breadcrumbItemOptions.length + 1),
                    replace: false
                })

            },
            handleAddStepItemOptions() {
                this.data.options.stepItemOptions.push(
                    {
                        value: '步骤' + (this.data.options.stepItemOptions.length + 1),
                        description: ""
                    })

            },
            handleResetOptions() {
                this.data.options.defaultValue = 0
                this.data.options.nextStep = false

            },
            handleAddTabsOption() {
                var size = this.data.options.options.length;
                this.data.options.options.push({
                    value: '新选项' + (parseInt(size) + 1),
                    label: '新选项' + (parseInt(size) + 1)
                })
                this.data.tabColumns.push([])

            },
            handleAddCollapseOption() {
                var size = this.data.options.options.length;
                this.data.options.options.push({
                    value: '面板' + (parseInt(size) + 1),
                    label: '面板' + (parseInt(size) + 1)
                })
                this.data.tabColumns.push([])

            },
            handleAddascade() {
                alert(1)

            },
            handleAddColumn() {
                this.data.columns.push({
                    span: '',
                    list: []
                })
            },
            handleSelectMuliple(value) {
                if (value) {
                    if (this.data.options.defaultValue) {
                        this.data.options.defaultValue = [this.data.options.defaultValue]
                    } else {
                        this.data.options.defaultValue = []
                    }

                } else {
                    if (this.data.options.defaultValue.length > 0) {
                        this.data.options.defaultValue = this.data.options.defaultValue[0]
                    } else {
                        this.data.options.defaultValue = ''
                    }

                }
            },
            onSelectedControlType(value, index) {
                var data = this.data;
                //basicComponents, advanceComponents,layoutComponents,navigationComponents,uncommonlyUsedComponents
                var allComponents=this.basicComponents.concat( this.advanceComponents)
                    .concat( this.advanceComponents)
                    .concat( this.layoutComponents)
                    .concat( this.navigationComponents)
                    .concat( this.uncommonlyUsedComponents)
                allComponents.forEach(function (value1, i) {
                    if (value1.type == value.trim()) {
                        data.type = value1.type
                        data.name = value1.name
                        data.icon = value1.icon
                        data.rules = [];
                        data.options = value1.options
                    }
                })
            },
            onSelectedDateType(value, index) {
                this.data.options.format = value
            },
            changeCity(value) {
                this.$forceUpdate()


            },
            validateRequired(val) {
                if (val) {
                    //console.log(1111)
                    this.validator.required = {required: true, message: `${this.data.name}必须填写`}
                    // this.generateRule("string")
                } else {
                    this.validator.required = null
                }

                // this.$nextTick(() => {
                //   this.generateRule()
                // })
            },

            validateDataType(val) {


            },
            checkIsNullOrEmpty(value) {
                var reg = /^\s*$/;
                return value != null && value != undefined && !reg.test(value);
            }
        },

        watch: {
            selectWidget: {

                handler(val) {
                    //第一次拖拽表单时触发
                    this.$emit('update:select', val)
                },
                deep: true
            },
            //监听输入的span值
            'data.options.span': function (val) {
                //console.log(val);
                if (val >= 24) {
                    this.data.options.span = 24;
                }
            },

            'data.options.rangeAble': function (val) {
                if (typeof val !== 'undefined') {
                    if (val) {
                        this.data.options.defaultValue = null
                    } else {
                        if (Object.keys(this.data.options).indexOf('defaultValue') >= 0)
                            this.data.options.defaultValue = ''
                    }
                }
            },
            'data.name': function (val) {
                this.getAllDate()

                this.initControlsItem();
                if (this.data.type == 'dialog' || this.data.type == 'userDialog') {
                    this.getRemoteField()
                    this.getAllUserDialogSelectorList();
                }

                if (this.data.options) {


                    //  this.validateRequired(this.data.options.required)
                    //  this.validateDataType(this.data.options.dataType)
                    // this.valiatePattern(this.data.options.pattern)
                }
            }
        }
    }
</script>
<style type="text/css">
    .input-group {
        margin-top: 5px;
    }

    .custom_input {
        width: auto !important;
    }
</style>
